<template>
  <el-container class="contain">
    <TreeFilter
      v-show="showTree"
      label="name"
      title="列表"
      :data="treeData"
      :default-value="initParam.departmentId"
      @change="changeTreeFilter"
      class="menu-tree"
      :is-input="false"
      :is-all="false"
      style="width: 180px; height: 100%"
      accordion
    />
    <el-container style="width: calc(100% - 180px); height: 100%">
      <normalCard :title="currentTitle">
        <el-button class="btnChange" type="primary" @click="handleClick">返回</el-button>
        <div class="main-flex">
          <div class="item">
            <div class="chartTitle" style="font-size: 25px">
              {{ items.title }}({{ route.query.title }} {{ route.query.county }} {{ route.query.gird }} {{ route.query.label }})
            </div>
            <div style="min-width: 100%; height: 100%; padding: auto">
              <TsxTablePage :tables="items" :column="column" />
            </div>
          </div>
        </div>
      </normalCard>
    </el-container>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, onBeforeMount } from "vue";
import normalCard from "../../components/normalCard.vue";
import TreeFilter from "@/components/TreeFilter/index.vue";
import TsxTablePage from "./components/TsxtablePage.vue";
import { getManYiDuApi } from "@/api/modules/manyidu";
import { getWxManYiDuApi } from "@/api/modules/wxmanyidu";
import { useRouter, useRoute } from "vue-router";
import { columns1, columns2 } from "./components/columns";

const route = useRoute();
const router = useRouter();
const treeData = ref<any>([]);
const items = ref<any>([]);
const showTree = ref(true);
const column = ref<any[]>([]);
const initParam = reactive({ departmentId: "" });
const fromRoute = ref<any>("");
console.log(route.query);
// 在组件挂载前记录来源路由
onBeforeMount(() => {
  // 获取实际的来源路由名称
  fromRoute.value = router.currentRoute.value.meta?.from || "twoPage";
  console.log("上一级", fromRoute.value);
});

const fetchTreeData = async () => {
  const res = ref<any>();
  if (route.query.name?.includes("家宽")) {
    column.value = columns1;
    res.value = await getManYiDuApi(route.query);
  } else {
    column.value = columns2;
    res.value = await getWxManYiDuApi(route.query);
  }
  const data = [{ id: "1", name: "满意度", type: "line", data: res.value.data }];
  treeData.value = data;

  // 设置默认选中第一个节点的 id
  if (treeData.value.length > 0) {
    initParam.departmentId = treeData.value[0].id;
    updateContent();
  }
};

const currentNode = computed(() => {
  return findNodeById(treeData.value, initParam.departmentId);
});
const currentTitle = computed(() => currentNode.value?.name);

const updateContent = () => {
  items.value = currentNode.value?.data || [];
};

const findNodeById = (nodes, id) => {
  for (const node of nodes) {
    if (node.id === id) return node;
    if (node.children) {
      const found = findNodeById(node.children, id);
      if (found) return found;
    }
  }
  return null;
};

const changeTreeFilter = val => {
  initParam.departmentId = val;
  updateContent();
};

const handleClick = () => {
  router.push({
    name: fromRoute.value,
    query: route.query
  });
};

onMounted(fetchTreeData);
</script>

<style lang="scss" scoped>
@import "index.scss";
.btnChange {
  padding-left: 20px;
  font-size: 16px;
  color: #91c7ff;
  background-color: rgb(18 142 255 / 30%);
  border: 1px solid rgb(18 142 255 / 80%);
}
</style>
